/**
 * 2017年10月27日 10:03:59
 * @author 554665488@qq.com
 * @user yinfanliang
 https://www.helloweba.com/view-blog-277.html  PHP+jQuery+Ajax多图片上传
 */
$(function () {

    var bar1 = $('.bar');
    var percent1 = $('.percent');
    var showimg1 = $('#showimg');
    var progress1 = $(".progress");
    var files1 = $(".files");
    var btn1 = $(".btn span");

    $("#fileupload").wrap("<form id='myupload' action='/Admincenter/AutumnWander/upload.html' method='post' enctype='multipart/form-data'></form>");
    $("#fileupload").change(function () {
        $("#myupload").ajaxSubmit({
            dataType: 'json',
            beforeSend: function () {
                showimg1.empty();
                progress1.show();
                var percentVal = '0%';
                bar1.width(percentVal);
                percent1.html(percentVal);
                btn1.html("上传中...");
            },
            uploadProgress: function (event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar1.width(percentVal);
                percent1.html(percentVal);
            },
            success: function (data) {

                // files.html("<b>" + data.reside_imgs.name + "(" + data.reside_imgs.size + "k)</b> <span class='delimg' rel='" + data.reside_imgs.savepath + data.reside_imgs.savename + "'>删除</span>");
                var img = "/Uploads" + data.reside_imgs.savepath + data.reside_imgs.savename;


                showimg1.after("<img data-id=" +'/Uploads'+data.reside_imgs.savepath + data.reside_imgs.savename + " style='width: 50px;padding-left:15px' src='" + img + "'><span class='delimg'  data-hidden='hidden_reside_imgs' data-unlink=" +'/Uploads'+ data.reside_imgs.savepath + data.reside_imgs.savename + ">删除</span>");

                $('input[name="hidden_reside_imgs"]').val($('input[name="hidden_reside_imgs"]').val() + "/Uploads" + data.reside_imgs.savepath+data.reside_imgs.savename + ',');

                btn1.html("添加附件");
            },
            error: function (xhr) {
                btn1.html("上传失败");
                bar1.width('0')
                files1.html(xhr.responseText);
            }
        });
    });

<dl class="nowrap">
        <dt>住:图片5张：</dt>
    <dd style="width:600px;text-align:left;" class="nowrap">
        <div class="demo">
        <div class="btn">
        <span>添加附件</span>
        <input id="fileupload" type="file" name="reside_imgs">
        <input type="hidden" name="hidden_reside_imgs" value="{$data['hidden_reside_imgs']}">
        </div>
        <div class="progress">
        <span class="bar"></span><span class="percent">0%</span >
    </div>
    <div class="files"></div>
        <div id="showimg"></div>
    {foreach name=hidden_reside_imgs key=key item=value from=$hidden_reside_imgs}
<img data-id="{$value}"  style="width: 60px" src="{$value}">
        <span class="delimg" data-hidden='hidden_reside_imgs' data-unlink="{$value}">删除</span>
    {/foreach}
    </div>
    </dd>
    </dl>


    @charset "utf-8";
        /* CSS Document */
        html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
        a{color:#007bc4/*#424242*/; text-decoration:none;outline: none;}
        a:hover{text-decoration:underline}
        a:focus {outline:none; -moz-outline:none;}
        ol,ul{list-style:none}
        table{border-collapse:collapse;border-spacing:0}
        /*html{background:url(../images/bg.png)}*/
        body{height:100%; font:14px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C;}
        img{border:none}


        #header{width:980px; height:90px; margin:0px auto; position:relative;}
        /*#logo{width:240px; height:90px; background:url(../images/logo_demo.gif) no-repeat}*/
        #logo h1{text-indent:-999em}
        #logo h1 a{display:block; width:240px; height:90px}


        #main{width:980px; min-height:600px; margin:30px auto 0 auto; border:1px solid #d3d3d3; background:#fff; -moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; border-radius:5px;}
        h2.top_title{margin:4px 20px; padding-top:15px; padding-left:20px; padding-bottom:10px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#a84c10; }

        #footer{height:60px;}
        #footer p{ padding:10px 2px; line-height:24px; text-align:center}
        #footer p a:hover{color:#51555C}
        #stat{display:none}

    .google_ad{width:728px; height:90px; margin:50px auto}
    .ad_76090,.ad_demo{width:760px; height:90px; margin:40px auto}
    .demo_topad{position:absolute; top:15px; right:0px; width:472px; height:60px;}


    @media screen and (min-width: 320px) and (max-width : 480px) {
        html{-webkit-text-size-adjust: none;}
        #header{width:100%}
        #main{width:100%; margin:10px auto;  -moz-border-radius:0px;-khtml-border-radius: 0px;-webkit-border-radius: 0px; border-radius:0px;}
    .demo_topad{display:none}
    .google_ad{width:100%; margin:40px auto; text-align:center}
    .ad_76090,.ad_demo{width:100%; height:auto; margin:40px auto;text-align:center}
    .demo{width:98%; margin:10px auto}
    }
    .demo{width:620px; margin:30px auto}
    .demo p{line-height:32px}
    .btn{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    .btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
    .progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
    .bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
    .percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
    .files{height:22px; line-height:22px; margin:10px 0}
    .delimg{margin-left:20px; color:#090; cursor:pointer}


    .demo6{width:620px; margin:30px auto}
    .demo6 p{line-height:32px}
    .btn6{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    .btn6 input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
    .progress6 { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
    .bar6 {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
    .percent6 { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }





        $(document).on('click', '.delimg', function () {
            var that = $(this);
            var imageName = $(this).attr("data-unlink");
            $.post("/Admincenter/AutumnWander/delImg.html", {imageName: imageName}, function (msg) {

                var msg = jQuery.parseJSON(msg);
                console.log(msg);
                if (msg.code == 1) {
                    var hidden_name = that.attr('data-hidden');

                    var hidden_str_handel = $('input[name=' + hidden_name + ']').val();
                    hidden_str_handel = hidden_str_handel.substr(0, hidden_str_handel.length - 1);
                    var arr = hidden_str_handel.split(',');
                    var hidden_str_handel_new = '';
                    $.each(arr, function (index, value) {

                        if (value != msg.imageName) {
                            hidden_str_handel_new += value + ',';
                        }
                    });
                    $('input[name=' + hidden_name + ']').val(hidden_str_handel_new);

                    $("img[data-id='" + msg.imageName + "']").remove();
                    that.remove();
                } else {
                    alert('删除失败');
                }
            });
        });


        var bar2 = $('.bar2');
        var percent2 = $('.percent2');
        var showimg2 = $('#showimg2');
        var progress2 = $(".progress2");
        var files2 = $(".files2");
        var btn2 = $(".btn2 span");

        $("#wander_imgs2").wrap("<form id='myupload2' action='/Admincenter/AutumnWander/upload.html' method='post' enctype='multipart/form-data'></form>");
        $("#wander_imgs2").change(function () {
            $("#myupload2").ajaxSubmit({
                dataType: 'json',
                beforeSend: function () {
                    showimg2.empty();
                    progress2.show();
                    var percentVal = '0%';
                    bar2.width(percentVal);
                    percent2.html(percentVal);
                    btn2.html("上传中...");
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar2.width(percentVal);
                    percent2.html(percentVal);
                },
                success: function (data) {
                    console.log(data);
                    // files.html("<b>" + data.reside_imgs.name + "(" + data.reside_imgs.size + "k)</b> <span class='delimg' rel='" + data.reside_imgs.savepath + data.reside_imgs.savename + "'>删除</span>");
                    var img = "/Uploads" + data.wander_imgs2.savepath + data.wander_imgs2.savename;


                    showimg2.after("<img data-id=" + '/Uploads'+data.wander_imgs2.savepath + data.wander_imgs2.savename + " style='width: 50px;padding-left:15px' src='" + img + "'><span class='delimg' data-hidden='hidden_wander_imgs2' data-upload-path-id='2' data-unlink=" +'/Uploads'+ data.wander_imgs2.savepath + data.wander_imgs2.savename + ">删除</span>");
                    $('input[name="hidden_wander_imgs2"]').val($('input[name="hidden_wander_imgs2"]').val() + "/Uploads" + data.wander_imgs2.savepath+data.wander_imgs2.savename + ',');

                    btn2.html("添加附件");
                },
                error: function (xhr) {
                    btn2.html("上传失败");
                    bar2.width('0')
                    files2.html(xhr.responseText);
                }
            });
        });
        var bar3 = $('.bar3');
        var percent3 = $('.percent3');
        var showimg3 = $('#showimg3');
        var progress3 = $(".progress3");
        var files3 = $(".files3");
        var btn3 = $(".btn3 span");

        $("#wander_imgs3").wrap("<form id='myupload3' action='/Admincenter/AutumnWander/upload.html' method='post' enctype='multipart/form-data'></form>");
        $("#wander_imgs3").change(function () {
            $("#myupload3").ajaxSubmit({
                dataType: 'json',
                beforeSend: function () {
                    showimg3.empty();
                    progress3.show();
                    var percentVal = '0%';
                    bar3.width(percentVal);
                    percent3.html(percentVal);
                    btn3.html("上传中...");
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar3.width(percentVal);
                    percent3.html(percentVal);
                },
                success: function (data) {
                    console.log(data);
                    // files.html("<b>" + data.reside_imgs.name + "(" + data.reside_imgs.size + "k)</b> <span class='delimg' rel='" + data.reside_imgs.savepath + data.reside_imgs.savename + "'>删除</span>");
                    var img = "/Uploads" + data.wander_imgs3.savepath + data.wander_imgs3.savename;

                    showimg3.after("<img data-id=" + '/Uploads'+data.wander_imgs3.savepath + data.wander_imgs3.savename + " style='width: 50px;padding-left:15px' src='" + img + "'><span class='delimg' data-hidden='hidden_wander_imgs3' data-upload-path-id='3' data-unlink=" +'/Uploads'+ data.wander_imgs3.savepath + data.wander_imgs3.savename + ">删除</span>");
                    // uploadPath=uploadPath.substr(0,uploadPath.length-1);
                    $('input[name="hidden_wander_imgs3"]').val($('input[name="hidden_wander_imgs3"]').val() + "/Uploads" + data.wander_imgs3.savepath +data.wander_imgs3.savename + ',');

                    btn3.html("添加附件");
                },
                error: function (xhr) {
                    btn3.html("上传失败");
                    bar3.width('0')
                    files3.html(xhr.responseText);
                }
            });
        });
        /**
         * =====================================================================================
         */
        var bar4 = $('.bar4');
        var percent4 = $('.percent4');
        var showimg4 = $('#showimg4');
        var progress4 = $(".progress4");
        var files4 = $(".files4");
        var btn4 = $(".btn4 span");

        $("#wander_imgs4").wrap("<form id='myupload4' action='/Admincenter/AutumnWander/upload.html' method='post' enctype='multipart/form-data'></form>");
        $("#wander_imgs4").change(function () {
            $("#myupload4").ajaxSubmit({
                dataType: 'json',
                beforeSend: function () {
                    showimg4.empty();
                    progress4.show();
                    var percentVal = '0%';
                    bar4.width(percentVal);
                    percent4.html(percentVal);
                    btn4.html("上传中...");
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar4.width(percentVal);
                    percent4.html(percentVal);
                },
                success: function (data) {
                    console.log(data);
                    // files.html("<b>" + data.reside_imgs.name + "(" + data.reside_imgs.size + "k)</b> <span class='delimg' rel='" + data.reside_imgs.savepath + data.reside_imgs.savename + "'>删除</span>");
                    var img = "/Uploads" + data.wander_imgs4.savepath + data.wander_imgs4.savename;


                    showimg4.after("<img data-id=" + '/Uploads'+data.wander_imgs4.savepath + data.wander_imgs4.savename + " style='width: 50px;padding-left:15px' src='" + img + "'><span class='delimg' data-hidden='hidden_wander_imgs4' data-upload-path-id='4' data-unlink=" +'/Uploads'+ data.wander_imgs4.savepath + data.wander_imgs4.savename + ">删除</span>");
                    // uploadPath=uploadPath.substr(0,uploadPath.length-1);
                    $('input[name="hidden_wander_imgs4"]').val($('input[name="hidden_wander_imgs4"]').val() + "/Uploads" + data.wander_imgs4.savepath +data.wander_imgs4.savename + ',');

                    btn4.html("添加附件");
                },
                error: function (xhr) {
                    btn4.html("上传失败");
                    bar4.width('0')
                    files4.html(xhr.responseText);
                }
            });
        });


        /**
         * =====================================================================================
         */
        var bar5 = $('.bar5');
        var percent5 = $('.percent5');
        var showimg5 = $('#showimg5');
        var progress5 = $(".progress5");
        var files5 = $(".files5");
        var btn5 = $(".btn5 span");

        $("#wander_imgs5").wrap("<form id='myupload5' action='/Admincenter/AutumnWander/upload.html' method='post' enctype='multipart/form-data'></form>");
        $("#wander_imgs5").change(function () {
            $("#myupload5").ajaxSubmit({
                dataType: 'json',
                beforeSend: function () {
                    showimg5.empty();
                    progress5.show();
                    var percentVal = '0%';
                    bar5.width(percentVal);
                    percent5.html(percentVal);
                    btn5.html("上传中...");
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar5.width(percentVal);
                    percent5.html(percentVal);
                },
                success: function (data) {
                    console.log(data);
                    // files.html("<b>" + data.reside_imgs.name + "(" + data.reside_imgs.size + "k)</b> <span class='delimg' rel='" + data.reside_imgs.savepath + data.reside_imgs.savename + "'>删除</span>");
                    var img = "/Uploads" + data.wander_imgs5.savepath + data.wander_imgs5.savename;


                    showimg5.after("<img data-id=" + '/Uploads'+data.wander_imgs5.savepath + data.wander_imgs5.savename + " style='width: 50px;padding-left:15px' src='" + img + "'><span class='delimg' data-hidden='hidden_wander_imgs5' data-upload-path-id='5' data-unlink=" +'/Uploads'+ data.wander_imgs5.savepath + data.wander_imgs5.savename + ">删除</span>");
                    // uploadPath=uploadPath.substr(0,uploadPath.length-1);
                    $('input[name="hidden_wander_imgs5"]').val($('input[name="hidden_wander_imgs5"]').val() + "/Uploads" + data.wander_imgs5.savepath +data.wander_imgs5.savename + ',');

                    btn5.html("添加附件");
                },
                error: function (xhr) {
                    btn5.html("上传失败");
                    bar5.width('0')
                    files5.html(xhr.responseText);
                }
            });
        });
        //=====================================================================

        /**
         * =====================================================================================
         */
        var bar6 = $('.bar');
        var percent6 = $('.percent6');
        var showimg6 = $('#showimg6');
        var progress6 = $(".progress6");
        var files6 = $(".files6");
        var btn6 = $(".btn6 span");

        $("#wander_imgs6").wrap("<form id='myupload6' action='/Admincenter/AutumnWander/upload.html' method='post' enctype='multipart/form-data'></form>");
        $("#wander_imgs6").change(function () {
            $("#myupload6").ajaxSubmit({
                dataType: 'json',
                beforeSend: function () {
                    showimg6.empty();
                    progress6.show();
                    var percentVal = '0%';
                    bar6.width(percentVal);
                    percent6.html(percentVal);
                    btn6.html("上传中...");
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar6.width(percentVal);
                    percent6.html(percentVal);
                },
                success: function (data) {
                    console.log(data);
                    // files.html("<b>" + data.reside_imgs.name + "(" + data.reside_imgs.size + "k)</b> <span class='delimg' rel='" + data.reside_imgs.savepath + data.reside_imgs.savename + "'>删除</span>");
                    var img = "/Uploads" + data.wander_imgs6.savepath + data.wander_imgs6.savename;

                    showimg6.after("<img data-id=" + '/Uploads'+data.wander_imgs6.savepath + data.wander_imgs6.savename + " style='width: 60px;padding-left:16px' src='" + img + "'><span class='delimg' data-hidden='hidden_wander_imgs6' data-upload-path-id='6' data-unlink=" +'/Uploads'+ data.wander_imgs6.savepath + data.wander_imgs6.savename + ">删除</span>");
                    // uploadPath=uploadPath.substr(0,uploadPath.length-1);
                    $('input[name="hidden_wander_imgs6"]').val($('input[name="hidden_wander_imgs6"]').val() + "/Uploads" + data.wander_imgs6.savepath +data.wander_imgs6.savename + ',');

                    btn6.html("添加附件");
                },
                error: function (xhr) {
                    btn6.html("上传失败");
                    bar6.width('0')
                    files6.html(xhr.responseText);
                }
            });
        });
        //=====================================================================
        $(document).on('click', '#submitButton', function () {
            var url = '/Admincenter/AutumnWander/add.html';
            var dataArr = $('#myform').serializeArray();

            $.ajax({
                type: "POST",
                url: url,
                cache: true,
                data: dataArr,
                beforeSend: function (XMLHttpRequest) {
                    $('#submitButton').off('click');
                },
                complete: function (XMLHttpRequest) {

                },
                success: function (msg) {
                    var msg = jQuery.parseJSON(msg);
                    if (msg.code == 1) {
                        window.location.href='/Admincenter/AutumnWander/index.html';
                    }else{
                        alert('提交失败');
                        window.location.reload();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('请求失败');
                }
            });
        })
        //============================================
        $(document).on('click', '#submitButton_edit', function () {
            var url = '/Admincenter/AutumnWander/edit.html';
            var dataArr = $('#myform').serializeArray();

            $.ajax({
                type: "POST",
                url: url,
                cache: true,
                data: dataArr,
                beforeSend: function (XMLHttpRequest) {
                    $('#submitButton').off('click');
                },
                complete: function (XMLHttpRequest) {

                },
                success: function (msg) {
                    var msg = jQuery.parseJSON(msg);
                    if (msg.code == 1) {
                        window.location.href='/Admincenter/AutumnWander/index.html';
                    }else{
                        alert('提交失败');
                        window.location.reload();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('请求失败');
                }
            });
        })
    });
